import React, { Component } from 'react';
import { ImageBackground, ScrollView, View, Image, StatusBar, Text, TouchableOpacity, FlatList, RefreshControl, DeviceEventEmitter } from 'react-native';
import TabBarTitle from '../components/TabBarTitle';
import { TabBarImage, TabBarAnimationImage } from '../components/TabBarImage';
import Colors from '../constants/Colors';
import { statusBarHeight, titleHeight, width, unitWidth } from '../constants/AdapterUtil';
import { MyHeader } from '../components/MyHeader';
import { api_member_info_index, api_member_info_company } from '../constants/HttpServices';
import { postFetch } from '../constants/HttpExtension';
import { MeItem } from '../components/Item';
import TextUtil from '../constants/TextUtil';
import { show } from '../constants/Toast';
import { contactBrowser } from '../constants/Gobrowser';
import CommonUtil from '../constants/CommonUtil';

export default class MeScreen extends Component {
    static navigationOptions = ({ navigation, jumpToIndex, scene }) => ({
        title: 'me',
        tabBarLabel: ({ focused }) => (
            <TabBarTitle
                focused={focused}
                title={'我的'}
            />
        ),
        tabBarIcon: ({ focused }) => (
            <TabBarAnimationImage
                focused={focused}
                hasSelect={require('../res/ic_me_c.png')}
                noSelect={require('../res/ic_me_n.png')}
            />
        ),
        tabBarOnPress: (options) => {
            DeviceEventEmitter.emit('tabClick', '');
            options.defaultHandler();
        },
        tabBarOnLongPress: (options) => {
            return
        },
    });

    constructor(props) {
        super(props)
        this.state = {
            userInfo: {},
            companyInfo: {},
        }
    }

    componentDidMount() {
        this.props.navigation.addListener('didFocus', payload => {
            this.getUserInfo();
        })
    }

    render() {
        return (
            <ScrollView style={{ flex: 1, backgroundColor: Colors.colorF5 }}>
                <MyHeader title='个人中心' />
                <View style={{ backgroundColor: Colors.white }}>
                    {this.getHeader()}
                    <View style={{ height: 100 * unitWidth, flexDirection: 'row', alignItems: 'center' }}>
                        <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
                            onPress={() => { this.props.navigation.navigate('MyDemand') }}>
                            <View style={{ alignItems: 'center' }}>
                                <Image source={require('../res/me_wdxq.png')} style={{ width: 32 * unitWidth, height: 36 * unitWidth }} resizeMode='stretch' />
                                <Text style={{ color: Colors.color33, fontSize: 14, marginTop: 6 * unitWidth }}>我的需求</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
                            onPress={() => { this.props.navigation.navigate('MyOrderList') }}>
                            <View style={{ alignItems: 'center' }}>
                                <Image source={require('../res/me_ddzx.png')} style={{ width: 30 * unitWidth, height: 33 * unitWidth }} resizeMode='stretch' />
                                <Text style={{ color: Colors.color33, fontSize: 14, marginTop: 6 * unitWidth }}>订单中心</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
                            onPress={() => { this.props.navigation.navigate('MyFollow') }}>
                            <View style={{ alignItems: 'center' }}>
                                <Image source={require('../res/me_wdgz.png')} style={{ width: 32 * unitWidth, height: 30 * unitWidth }} resizeMode='stretch' />
                                <Text style={{ color: Colors.color33, fontSize: 14, marginTop: 6 * unitWidth }}>我的关注</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
                {this.getItem()}
            </ScrollView>
        )
    }

    getHeader() {
        if (this.state.userInfo.user_type == '1' || this.state.userInfo.user_type == '2') {
            return (
                <ImageBackground
                    style={{ width: width, height: 222 * unitWidth }}
                    source={require('../res/bg_me_top.png')}
                    resizeMode='stretch'>
                    <View style={{ flexDirection: 'row', alignItems: 'flex-start', marginTop: 30 * unitWidth }}
                        onPress={() => { this.props.navigation.navigate('EditInfo') }}>
                        <TouchableOpacity activeOpacity={0.7} style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 32 * unitWidth }}
                            onPress={() => { this.props.navigation.navigate('MineInfo') }}>
                            <Image source={{ uri: this.state.userInfo.avatar }} style={{ backgroundColor: Colors.color99, width: 60 * unitWidth, height: 60 * unitWidth, borderRadius: 30 * unitWidth }} />
                            <View style={{ marginLeft: 10 * unitWidth }}>
                                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                    <Text style={{ color: Colors.white, fontSize: 16 }}>{this.state.userInfo.nickname}</Text>
                                    <Image source={require('../res/ic_me_xiugai.png')} style={{ width: 19 * unitWidth, height: 18 * unitWidth, marginLeft: 5 * unitWidth }} />
                                </View>
                                <Text style={{ color: Colors.white, fontSize: 16, marginTop: 7 * unitWidth }}>{TextUtil.getTextInput(this.state.userInfo.mobile, 5)}</Text>
                            </View>
                        </TouchableOpacity>
                        <View style={{
                            alignItems: 'flex-end',
                            justifyContent: 'center', flex: 1, minHeight: 80 * unitWidth
                        }}>
                            <TouchableOpacity activeOpacity={0.7} style={{}} onPress={() => {
                                if (this.state.userInfo.user_type == '1') {
                                    this.props.navigation.navigate('PersonalAuthentication');
                                } else if (this.state.userInfo.user_type == '2') {
                                    this.props.navigation.navigate('MerchantCertification');
                                }
                            }}>
                                <Image source={require('../res/me_qrzbtn.png')} style={{ width: 67 * unitWidth, height: 31 * unitWidth }} />
                            </TouchableOpacity>
                            {this.state.userInfo.perfecting_information == '0' && this.state.userInfo.user_type == '2' ?
                                <TouchableOpacity activeOpacity={0.7} style={{ marginTop: 10 * unitWidth }} onPress={() => {
                                    this.props.navigation.navigate('PerfectInformation');
                                }}>
                                    <Image source={require('../res/me_wsxxbtn.png')} style={{ width: 79 * unitWidth, height: 31 * unitWidth }} />
                                </TouchableOpacity> : null}
                        </View>
                    </View>
                    <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', width: 300 * unitWidth, alignSelf: 'center', marginTop: 31 * unitWidth }}
                        activeOpacity={0.7}
                        onPress={() => {
                            this.props.navigation.navigate('MyWallet')
                        }}>
                        <Text style={{ color: Colors.white, fontSize: 14 }}>我的钱包</Text>
                        <View style={{ position: 'absolute', right: 0, flexDirection: 'row', alignItems: 'center' }}>
                            <Text style={{ color: Colors.white, fontSize: 14 }}>查看</Text>
                            <Image source={require('../res/me_gogo.png')} style={{ width: 7 * unitWidth, height: 12 * unitWidth, marginLeft: 7 * unitWidth }} />
                        </View>
                    </TouchableOpacity>
                    <View style={{ backgroundColor: Colors.white, width: 300 * unitWidth, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth }} />
                    <View style={{ flexDirection: 'row', alignItems: 'center', width: 240 * unitWidth, alignSelf: 'center', marginTop: 10 * unitWidth, justifyContent: 'space-between' }} activeOpacity={0.7}>
                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <Text style={{ color: Colors.white, fontSize: 15 }}>余额</Text>
                            <Text style={{ color: Colors.white, fontSize: 21, marginLeft: 10 * unitWidth }}>{this.state.userInfo.credit2}</Text>
                        </View>
                        <TouchableOpacity style={{
                            flexDirection: 'row', alignItems: 'center', justifyContent: 'center',
                            width: 70 * unitWidth, height: 26 * unitWidth, borderRadius: 20, borderColor: Colors.white, borderWidth: 0.5
                        }} activeOpacity={0.7} onPress={() => { this.props.navigation.navigate('Withdrawal') }}>
                            <Text style={{ color: Colors.white, fontSize: 15 }}>提现</Text>
                        </TouchableOpacity>
                    </View>
                </ImageBackground>
            )
        } else if (this.state.userInfo.user_type == '3') {
            return (
                <ImageBackground
                    style={{ width: width, height: 140 * unitWidth }}
                    source={require('../res/bg_me_zzh.png')}
                    resizeMode='stretch'>
                    <View style={{ flexDirection: 'row', alignItems: 'flex-start', marginTop: 21 * unitWidth }}
                        onPress={() => { this.props.navigation.navigate('EditInfo') }}>
                        <TouchableOpacity activeOpacity={0.7} style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 32 * unitWidth }}>
                            <Image source={{ uri: this.state.userInfo.avatar }} style={{ backgroundColor: Colors.color99, width: 60 * unitWidth, height: 60 * unitWidth, borderRadius: 30 * unitWidth }} />
                            <View style={{ marginLeft: 10 * unitWidth }}>
                                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                    <Text style={{ color: Colors.white, fontSize: 16 }}>{this.state.userInfo.nickname}</Text>
                                    <Image source={require('../res/ic_me_xiugai.png')} style={{ width: 19 * unitWidth, height: 18 * unitWidth, marginLeft: 5 * unitWidth }} />
                                </View>
                                <Text style={{ color: Colors.white, fontSize: 16, marginTop: 7 * unitWidth }}>{this.state.userInfo.mobile}</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </ImageBackground>
            );
        }
    }

    getItem() {
        if (this.state.userInfo.user_type == '1') {
            return (
                <View style={{ backgroundColor: Colors.white, marginTop: 10 * unitWidth }}>
                    <MeItem
                        icon={
                            <Image source={require('../res/me_yhk.png')} style={{ width: 24 * unitWidth, height: 15 * unitWidth, marginLeft: 15 * unitWidth }} resizeMode='stretch' />
                        } text='银行卡' isLast={false}
                        onPress={() => {
                            this.props.navigation.navigate('BankCardList')
                        }} />
                    <MeItem
                        icon={
                            <Image source={require('../res/me_zhaq.png')} style={{ width: 21 * unitWidth, height: 25 * unitWidth, marginLeft: 15 * unitWidth }} resizeMode='stretch' />
                        } text='账号安全' isLast={false} onPress={() => { this.props.navigation.navigate('AccountSecurity') }} />
                    <MeItem
                        icon={
                            <Image source={require('../res/me_kefu.png')} style={{ width: 20 * unitWidth, height: 23 * unitWidth, marginLeft: 15 * unitWidth }} resizeMode='stretch' />
                        } text='客服' isLast={false} onPress={() => { CommonUtil.getKFLink() }} />
                    <MeItem
                        icon={
                            <Image source={require('../res/me_dizhi.png')} style={{ width: 18 * unitWidth, height: 22 * unitWidth, marginLeft: 15 * unitWidth }} resizeMode='stretch' />
                        } text='收货地址' isLast={false} onPress={() => { this.props.navigation.navigate('AddressManagement') }} />
                    <MeItem
                        icon={
                            <Image source={require('../res/me_shezhi.png')} style={{ width: 21 * unitWidth, height: 22 * unitWidth, marginLeft: 15 * unitWidth }} resizeMode='stretch' />
                        } text='设置' isLast={true}
                        onPress={() => {
                            this.props.navigation.navigate('Setting')
                        }} />
                </View>
            )
        } else if (this.state.userInfo.user_type == '2') {
            return (
                <View style={{ backgroundColor: Colors.white, marginTop: 10 * unitWidth }}>
                    <MeItem
                        icon={
                            <Image source={require('../res/me_zzhgl.png')} style={{ width: 21 * unitWidth, height: 18 * unitWidth, marginLeft: 15 * unitWidth }} resizeMode='stretch' />
                        } text='子账户管理' isLast={false}
                        onPress={() => {
                            this.props.navigation.navigate('AccountManagement')
                        }} />
                    <MeItem
                        icon={
                            <Image source={require('../res/me_yhk.png')} style={{ width: 24 * unitWidth, height: 15 * unitWidth, marginLeft: 15 * unitWidth }} resizeMode='stretch' />
                        } text='银行卡' isLast={false} onPress={() => { }}
                        onPress={() => {
                            this.props.navigation.navigate('BankCardList')
                        }} />
                    <MeItem
                        icon={
                            <Image source={require('../res/me_gghb.png')} style={{ width: 19 * unitWidth, height: 23 * unitWidth, marginLeft: 15 * unitWidth }} resizeMode='stretch' />
                        } text='广告红包' isLast={false}
                        onPress={() => {
                            this.props.navigation.navigate('RedEnvelopes')
                        }} />
                    <MeItem
                        icon={
                            <Image source={require('../res/me_zhaq.png')} style={{ width: 21 * unitWidth, height: 25 * unitWidth, marginLeft: 15 * unitWidth }} resizeMode='stretch' />
                        } text='账号安全' isLast={false} onPress={() => { this.props.navigation.navigate('AccountSecurity') }} />
                    <MeItem
                        icon={
                            <Image source={require('../res/me_kefu.png')} style={{ width: 20 * unitWidth, height: 23 * unitWidth, marginLeft: 15 * unitWidth }} resizeMode='stretch' />
                        } text='客服' isLast={false} onPress={() => { CommonUtil.getKFLink() }} />
                    <MeItem
                        icon={
                            <Image source={require('../res/me_dizhi.png')} style={{ width: 18 * unitWidth, height: 22 * unitWidth, marginLeft: 15 * unitWidth }} resizeMode='stretch' />
                        } text='收货地址' isLast={false} onPress={() => { this.props.navigation.navigate('AddressManagement') }} />
                    <MeItem
                        icon={
                            <Image source={require('../res/me_shezhi.png')} style={{ width: 21 * unitWidth, height: 22 * unitWidth, marginLeft: 15 * unitWidth }} resizeMode='stretch' />
                        } text='设置' isLast={true}
                        onPress={() => {
                            this.props.navigation.navigate('Setting')
                        }} />
                </View>
            )
        } else if (this.state.userInfo.user_type == '3') {
            return (
                <View style={{ backgroundColor: Colors.white, marginTop: 10 * unitWidth }}>
                    <MeItem
                        icon={
                            <Image source={require('../res/me_zhaq.png')} style={{ width: 21 * unitWidth, height: 25 * unitWidth, marginLeft: 15 * unitWidth }} resizeMode='stretch' />
                        } text='账号安全' isLast={false} onPress={() => { this.props.navigation.navigate('AccountSecurity') }} />
                    <MeItem
                        icon={
                            <Image source={require('../res/me_kefu.png')} style={{ width: 20 * unitWidth, height: 23 * unitWidth, marginLeft: 15 * unitWidth }} resizeMode='stretch' />
                        } text='客服' isLast={false} onPress={() => { CommonUtil.getKFLink() }} />
                    <MeItem
                        icon={
                            <Image source={require('../res/me_dizhi.png')} style={{ width: 18 * unitWidth, height: 22 * unitWidth, marginLeft: 15 * unitWidth }} resizeMode='stretch' />
                        } text='收货地址' isLast={false} onPress={() => { this.props.navigation.navigate('AddressManagement') }} />
                    <MeItem
                        icon={
                            <Image source={require('../res/me_shezhi.png')} style={{ width: 21 * unitWidth, height: 22 * unitWidth, marginLeft: 15 * unitWidth }} resizeMode='stretch' />
                        } text='设置' isLast={true}
                        onPress={() => {
                            this.props.navigation.navigate('Setting')
                        }} />
                </View>
            )
        }
    }

    //获取用户信息
    getUserInfo() {
        let params = {

        }
        postFetch(api_member_info_index, params, {
            success: (response) => {
                global.userInfo = response.result;
                this.setState({
                    userInfo: response.result,
                }, () => {
                    //如果是公司用户的话就要调用拿公司信息的接口
                    if (this.state.userInfo.user_type == '2' || this.state.userInfo.user_type == '3') {
                        this.getCompanyInfo();
                    }
                })
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }

    //获取公司信息
    getCompanyInfo() {
        let params = {

        }
        postFetch(api_member_info_company, params, {
            success: (response) => {
                global.companyInfo = response.result;
                this.setState({
                    companyInfo: response.result,
                })
            },
            fail: (response) => {
                // show(response.result.message);
            }
        })
    }
}